<template>
  <van-popup
    round
    safe-area-inset-top
    safe-area-inset-bottom
    v-model:show="show"
    position="bottom"
    closeable
    transition-appear
    :style="{ height: '80%' }"
    class="popouBox"
  >
    <div class="title">
      {{ title }}
    </div>
    <van-search
      v-model="searchValue"
      shape="round"
      background="#ddd"
      show-action
      placeholder="请输入编号"
    >
      <template #action>
        <van-button size="small" @click="handleSearch" type="primary"
          >搜 索</van-button
        >
      </template>
    </van-search>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="50"
    >
      <div
        class="tableRow"
        @click="selectItemFun(item, index)"
        v-for="(item, index) in tabList"
        :key="item.ID"
      >
        <div class="rowName overShow">{{ item.Name }}</div>
        <div class="pictrue" @click.stop="previewImg(item)">
          <van-image
            width="100"
            height="40"
            fit="cover"
            :src="$addFileHead(item.ShowPictrue)"
          >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </div>
        <div class="status">
          <div v-if="Category == 2">
            <el-tag effect="dark" :type="filterStatus2[item.State_Self]">{{
              filterStatusName2[item.State_Self]
            }}</el-tag>
          </div>
          <div>
            <el-tag effect="dark" :type="filterStatus[item.State]">{{
              filterStatusName[item.State]
            }}</el-tag>
          </div>
        </div>
        <div class="select">
          <div v-show="activeIndex == index">
            <van-icon name="checked" color="#1989fa" size="24" />
          </div>
          <div v-show="activeIndex != index">
            <div class="circle"></div>
          </div>
        </div>
      </div>
      <div style="height: 64px"></div>
      <div class="footer">
        <div @click="show = false">
          <van-button round style="width: 150px" plain type="primary"
            >取消</van-button
          >
        </div>
        <div @click="confrimSelect">
          <van-button round style="width: 150px" type="primary"
            >确认</van-button
          >
        </div>
      </div>
    </van-list>
  </van-popup>
</template>

<script setup name="DevicePopo">
import { GetDeviceList_Page } from '@/api/teachDevice/account.js';
import { computed, getCurrentInstance, onMounted } from 'vue';
import { showImagePreview } from 'vant';
const { proxy } = getCurrentInstance();
const route = useRoute();
const emit = defineEmits(['update:showPopover', 'getItem']);
const props = defineProps({
  showPopover: {
    default: false
  },
  title: {
    default: '设备'
  }
});
const page = ref({
  PageIndex: 0,
  PageSize: 10
});
const activeIndex = ref(-1);
const loading = ref(false);
const finished = ref(false);
const searchValue = ref('');
const total = ref(0);
const selectItem = ref({});
const Category = ref(1);
const tabList = ref('');
const title = computed(() => props.title);
const show = computed({
  get: () => props.showPopover,
  set: val => {
    emit('update:showPopover', val);
  }
});

const filterStatus = ref({});
const filterStatusName = ref({});
const filterStatus2 = ref({});
const filterStatusName2 = ref({});
// const Category = {
//   1: "教学装备",
//   2: "工具物资",
// };
const State_Self = {
  1: '正常',
  2: '降级',
  3: '报废'
};
const State_SelfType = {
  1: 'success',
  2: 'danger',
  3: 'info'
};

const State = ref({
  1: '正常运行',
  2: '保养中',
  3: '维修中',
  4: '使用中'
});
const StateType = {
  1: 'success',
  2: 'warning',
  3: 'danger',
  4: ''
};

onMounted(() => {
  Category.value = Number(route.query.category);
  initStatusTag();
});
function initStatusTag() {
  switch (Category.value) {
    case 1:
      filterStatus.value = StateType;
      filterStatusName.value = State.value;
      break;
    case 2:
      State.value[1] = '在库';
      State.value[2] = '检验中';
      filterStatus.value = StateType;
      filterStatusName.value = State.value;
      filterStatus2.value = State_SelfType;
      filterStatusName2.value = State_Self;
      console.log(filterStatusName2.value);
      break;
  }
}

const onLoad = () => {
  console.log('触底');
  setTimeout(() => {
    page.value.PageIndex++;
    getList();
  }, 500);
};

function handleSearch() {
  finished.value = false;
  tabList.value = [];
  page.value.PageIndex = 0;
  loading.value = true;
  onLoad();
}

function confrimSelect() {
  emit('getItem', selectItem.value);
  show.value = false;
}

function previewImg(item) {
  showImagePreview({
    images: [proxy.$addFileHead(item.ShowPictrue)],
    closeable: true
  });
}

function selectItemFun(item, index) {
  selectItem.value = item;
  activeIndex.value = index;
}

async function getList() {
  try {
    let query = {
      ...page.value,
      Category: Category.value,
      NoPage: '',
      Code: searchValue.value
    };
    let res = await GetDeviceList_Page(query);
    tabList.value = res.data.List;
    total.vlaue = res.data.Total;
    loading.value = false;
    if (tabList.value.length >= total.value) {
      finished.value = true;
    }
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="scss" scoped>
.popouBox {
  position: relative;
  .footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    // height: 40px;
    margin-bottom: 20px;
    padding-top: 10px;
    box-shadow: 0 -2px 2px #ddd;
  }
}
.tableRow {
  display: flex;
  justify-content: space-between;
  margin-top: 4rpx;
  align-items: center;
  padding: 0 10rpx;
  border-bottom: 1px solid #eee;
  .rowName {
    width: 30%;
  }
  .pictrue {
    // width: 20;
  }
  .status {
    width: 20%;
  }
  .circle {
    width: 23px;
    height: 23px;
    border: 1px solid #ddd;
    border-radius: 50%;
    // margin-right: 10rpx;
  }
  .select {
    width: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.title {
  text-align: center;
  height: 50rpx;
  line-height: 50rpx;
}
:deep(.van-search__action){
  padding: 0;
  line-height: unset;
  margin: 0 10px;
}
</style>
